<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据统计</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/css/app.css">
    <link rel="stylesheet" href="../assets/css/gb_my.css">
    <link rel="stylesheet" href="../assets/css/font-awesome.css">
    <link rel="stylesheet" href="../assets/css/bootstrap-reset.css">
</head>
<body data-type="chart">
<div class="am-g tpl-g">
    <!--头部-->
    <nav class="navbar navbar-default top-navbar">
        <div class="navbar-header">
            <a class="navbar-brand waves-effect waves-dark" href="javascript:;">
                <img src="../assets/img/logo.png" alt="">
                <strong>轻课网考试系统</strong>
            </a>
            <div id="sideNav" href="">
                <i class="mulv QK QK-mulu"></i>
            </div>
        </div>

        <ul class="nav navbar-top-links navbar-right aaa">
            <li>
                <a id="down_" class="sign-out dropdown-button waves-effect waves-dark" href="javascript:;">
                    <span class="am-icon-sign-out"></span> 退出
                </a>
            </li>
            <li>
                <a class="dropdown-button waves-effect waves-dark" href="javascript:;"><b>欢迎你, <span class="userName"></span> </b></a>
            </li>
        </ul>
    </nav>
    <!--导航栏-->
    <nav class="navbar-default navbar-side">
        <div class="sidebar-collapse">
            <!--用户头像-->
            <div class="tpl-sidebar-user-panel">
                <div class="tpl-user-panel-slide-toggleable">
                    <div class="tpl-user-panel-profile-picture">
                        <img src="../assets/img/user04.png" alt="">
                    </div>
                </div>
            </div>
            <dl class="list_dl">
                <dt class="list_dt">
                    <a href="../index.html">
                        <span class="QK1 start_before"></span>
                        <p>首页</p>
                    </a>
                </dt>
                <dt class="list_dt">
                    <span class="QK1 topic_before"></span>
                    <p>题库管理</p>
                    <i class="QK1 list_dt_icon"></i>
                </dt>
                <dd class="list_dd">
                    <ul>
                        <li class="list_li">
                            <a href="../questiondb/questiondb.html">管理题库</a>
                        </li>
                        <li class="list_li">
                            <a href="../question/question.html">管理试题</a>
                        </li>
                    </ul>
                </dd>
                <dt id="open" class="list_dt">
                    <span class="QK1 paper_before"></span>
                    <p>试卷管理</p>
                    <i class="QK1 list_dt_icon"></i>
                </dt>
                <dd class="list_dd" style="display: block">
                    <ul>
                        <li class="list_li">
                            <a href="../paper/addpaper.html">创建试卷</a>
                        </li>
                        <li class="list_li" id="style_li_a">
                            <a href="../paper/paper.html">管理试卷</a>
                        </li>
                    </ul>
                </dd>
                <dt class="list_dt">
                    <span class="QK1 system_before"></span>
                    <p>系统管理</p>
                    <i class="QK1 list_dt_icon"></i>
                </dt>
                <dd class="list_dd">
                    <ul>
                        <li class="list_li">
                            <a href="../system.html">系统管理</a>
                        </li>
                        <li class="list_li">
                            <a href="../admin/admin.html">管理员</a>
                        </li>
                        <li class="list_li">
                            <a href="../adminroles/adminroles.html">角色管理</a>
                        </li>
                    </ul>
                </dd>
                <dt class="list_dt">
                    <span class="QK1 user_before"></span>
                    <p>用户管理</p>
                    <i class="QK1 list_dt_icon"></i>
                </dt>
                <dd class="list_dd">
                    <ul>
                        <li class="list_li">
                            <a href="../user/user.html">管理用户</a>
                        </li>
                        <li class="list_li">
                            <a href="../user/usergroup.html">用户分组</a>
                        </li>
                    </ul>
                </dd>
                <dt class="list_dt">
                    <span class="QK1 user_before"></span>
                    <p>知识点模块</p>
                    <i class="QK1 list_dt_icon"></i>
                </dt>
                <dd class="list_dd">
                    <ul>
                        <li class="list_li">
                            <a href="../KnowledgePoint/KnowledgeBlock.html">管理知识点</a>
                        </li>
                    </ul>
                </dd>
            </dl>
        </div>
    </nav>
    <!-- 内容区域 -->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <section class="panel">
                    <header class="panel-heading">
                        <span class="label label-primary">数据统计</span>
                        <button type="button" class="btn btn-success btn-sm add_clazz btn_my" id="back">
                            <span class="QK1 QK-fanhui1"></span>&nbsp;&nbsp;返回
                        </button>
                    </header>
                    <div class="panel-body">
                        <div id="mark" style="width: 80%"></div>
                        <div class="title_middle">
                            <p>错题统计</p>
                        </div>
                        <table class="table table-bordered table-striped table-condensed table_paper add_table" id="example-r">
                            <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>题干</th>
                                    <th>人数</th>
                                    <th>百分比</th>
                                </tr>
                            </thead>
                            <tbody id="wraper">
                            </tbody>
                        </table>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/theme.js"></script>
<script type="text/javascript" src="../assets/js/jquery.cookie.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/drilldown.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/amazeui.datatables.min.js"></script>
<script src="../assets/js/dataTables.responsive.min.js"></script>
<script src="../assets/js/app.js"></script>
<script>
    //试卷id
    var paperid = window.location.search.split("=")[1];
    $("#back").click(function() {
        window.location.href = "examInfo.html?id=" + paperid;
    });
    //请求数据
    $.ajax({
        type: "post",
        url: localApi + "/ExamDetail/errorRate",
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
        data: {
            apikey: '1',
            pid: paperid
        },
        success: function(result) {
//            console.log(result.data);
            var number_per,
                content;
            $.each(result.data, function(n, item) {
                number_per = item.errorRate.toFixed(2);
//                console.log(number_per);
                if (number_per.charAt(2) == 0){
                    number_per = number_per.slice(3,4)+"%";
//                    console.log(number_per);
                }else {
                    number_per = number_per.slice(2,4)+"%";
                }
                content = item.questionWithBLOBs.content.replace(/<[^>]+>/g,"");//去除html标签
                var coulmn = '<tr class="even gradeX student add_p3"><td>' + item.qid + '</td><td>' + content+'</td>' +
                    '<td>' + item.num + '</td><td>' + number_per + '</td></tr>';
                $('#wraper').append(coulmn);
            });
        }
    });
    var chart = {
        chart: {
            type: 'column'
        },
        title: {
            text: '成绩统计',
            style:{
                fontSize:'3rem'
            }
        },
        yAxis: {
            title: {
                text: '人数(个)'
            }
        },
        credits: {
            enabled: false
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:f}人</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        xAxis: {
            categories: ['90分以上', '80分到90分', '70分到80分', '60分到70分', '60分以下']
        }
    };
    $.ajax({
        type: "post",
        async: false,
        url: localApi + "/ExamDetail/scoreCount",
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
        data:{
            apikey:'1',
            pid:paperid
        },
        success: function (result) {
            console.log(result.data);
            var data = result.data;
            chart.series = [];
            var code = data.avg.toFixed(1);
            chart.subtitle = {
                text: '平均分:' + code + '分',
                style: {
                    color:'#3E576F',
                    fontSize:'3rem'
                },
                floating: true,
                align: 'right'
            };
            var json1 = new Object();
            json1.name=  '人数';
            json1.data = [data.ninety , data.eighty , data.seventy , data.sixty , data.fail];
            json1.color = '#8FBC8F';
            chart.series.push(json1);
            Highcharts.chart('mark', chart);
        }
    });
</script>
<script>
    $(document).ready(function () {
        $(".list_dt").on("click",function () {
            $('.list_dd').stop();
            $(this).siblings("dt").removeAttr("id");
            if($(this).attr("id")=="open"){
                $(this).removeAttr("id").siblings("dd").slideUp();
            }else{
                $(this).attr("id","open").next().slideDown().siblings("dd").slideUp();
            }
        });
    });
</script>
<script>
    $(document).ready(function () {
        $(".dropdown-button").dropdown();
        $("#sideNav").click(function(){
            if($(this).hasClass('closed')){
                $('.navbar-side').animate({left: '0px'});
                $(this).removeClass('closed');
                $('#page-wrapper').animate({'margin-left' : '260px'});
            }
            else{
                $(this).addClass('closed');
                $('.navbar-side').animate({left: '-260px'});
                $('#page-wrapper').animate({'margin-left' : '0px'});
            }
        });
    });
    $(".dropdown-button").dropdown();
</script>